<template>
	<a-modal v-model='showModal' @ok='cancel' @cancel='cancel' :title='titles' width='70%'>
		<a-spin :spinning='loading'>
			<a-form :form='form'>
				<a-row :gutter='[24, 0]'>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物名称' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<a-input placeholder='请输入' disabled v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength='30'></a-input>
						</a-form-item>
					</a-col>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物照片' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<img :src='avatar' style='width: 100px;height: 100px'/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter='[24, 0]'>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物分类' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<div style='display: flex;'>
								<a-select disabled class='flex-1' @change='changeSelect' placeholder='请选择'
									v-decorator="['firstCategoryId', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value='item.id' v-for='(item,index) in cateOne'
										:key='index'>{{item.name}}</a-select-option>

								</a-select>
								<a-select disabled class='flex-1' @change='changeSelect' placeholder='请选择'
									v-decorator="['secondCategoryId', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value='item.id' v-for='(item,index) in cateTwo'
										:key='index'>{{item.name}}</a-select-option>

								</a-select>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter='[24, 0]'>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物年龄' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<a-input disabled placeholder='请输入' v-decorator="[
                  'age',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength='30'></a-input>
						</a-form-item>
					</a-col>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物性别' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<div style='display:flex'>
								<a-select disabled class='flex-1' @change='changeSelect' placeholder='请选择'
									v-decorator="['gender', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value='1'>雄</a-select-option>
									<a-select-option :value='2'>雌</a-select-option>
									<a-select-option :value='3'>未知</a-select-option>
								</a-select>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter='24'>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物主人' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<a-input disabled placeholder='请输入' v-decorator="[
                  'userName',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength='30'></a-input>
						</a-form-item>
					</a-col>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='宠物主人联系电话' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<a-input disabled placeholder='请输入' v-decorator="[
                  'mobile',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength='30'></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter='24'>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='是否绝育' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<div style='display:flex'>
								<a-select disabled class='flex-1' @change='changeSelect' placeholder='请选择'
									v-decorator="['sterilization', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value='0'>否</a-select-option>
									<a-select-option :value='1'>是</a-select-option>
								</a-select>
							</div>
						</a-form-item>
					</a-col>
					<a-col :span='12'>
						<a-form-item class='mb-15' label='接种疫苗' :label-col='labelCol' :wrapper-col='wrapperCol'>
							<div style='display:flex'>
								<a-select disabled class='flex-1' @change='changeSelect' placeholder='请选择'
									v-decorator="['vaccination', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value='0'>否</a-select-option>
									<a-select-option :value='1'>是</a-select-option>
								</a-select>
							</div>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter='24'>
					<a-col :span='24'>
						<a-form-item class='mb-15' label='备注' :label-col='{ span: 4 }' :wrapper-col='{ span: 20 }'>
							<a-textarea disabled placeholder='请输入' v-decorator="[
                  'remark',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength='300'></a-textarea>
						</a-form-item>
					</a-col>
				</a-row>

			</a-form>
		</a-spin>
	</a-modal>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	import {
		simpleQuery,petsget
	} from '@/api/index'

	export default {
		data() {
			return {
				loading: false,
				isShow: true,
        avatar:'',
				labelCol: {
					span: 8
				},
				content: '<p>Hello World!</p>',

				editorOption: {
					placeholder: '请输入',
					theme: 'snow',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
								['blockquote', 'code-block'], // 引用  代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 1、2 级标题
								[{
									list: 'ordered'
								}, {
									list: 'bullet'
								}], // 有序、无序列表
								[{
									script: 'sub'
								}, {
									script: 'super'
								}], // 上标/下标
								[{
									indent: '-1'
								}, {
									indent: '+1'
								}], // 缩进
								// [{ direction: 'rtl' }], // 文本方向
								[{
									size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 字体颜色、字体背景颜色
								// [{ font: ['songti'] }], // 字体种类
								[{
									align: []
								}], // 对齐方式
								['clean'], // 清除文本格式
								['image'] // 链接、图片，需要视频的可以加上video
							]
						}
					}
				},
				data: [{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					},
					{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					}
				],
				columns: [{
						title: '规格名称',
						dataIndex: 'name',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'name'
						}
					},
					{
						title: '规格图片',
						dataIndex: 'img',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'img'
						}
					},
					{
						title: '规格库存',
						dataIndex: 'num',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'num'
						}
					},
					{
						title: '规格价格（元）',
						dataIndex: 'price',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'price'
						}
					},
					// 查看显示
					{
						title: '已售销量',
						dataIndex: 'sales',
						align: 'center',
						width: 90,
						scopedSlots: {
							customRender: 'sales'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],

				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				cateOne: [],
				cateTwo: []
			}
		},
		computed: {},
		watch: {},
		async created() {
			this.loadData()
		},
		components: {
			quillEditor
		},
		methods: {
			//获取分类
			async loadData() {
				try{
          const res = await simpleQuery({
					parentId: 0,
          pagesize:100,
				})
				this.cateOne = res?.list
        const res1 = await simpleQuery({
					parentId: this.info.firstCategoryId,
          pagesize:100,
				})
				this.cateOne = res?.list
        this.cateTwo=res1?.list
        }catch(error){
          console.log(error)
        }
			},
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件，只需要这一个方法就够了
			onEditorChange({
				quill,
				html,
				text
			}) {
				console.log('editor change!', quill, html, text)
				this.content = html
			},
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled
						}
						console.log('data', values)
						return
						const fun = info && info.id ? deductionDetail : deductionDetail
						fun(data)
							.then(() => {
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			async open(data) {
				this.info = data
				if (data.id) {

					this.titles = '修改'
				} else {
					this.titles = '新增'
				}
				this.showModal = true
				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
        const res=await petsget({id:data.id})
        this.avatar=res.avatar
        this.$nextTick(() => {
					this.form.setFieldsValue({
						name: res.name,
						avatar: res.avatar,
						firstCategoryId: res.firstCategoryId,
						secondCategoryId: res.secondCategoryId,
						age: res.age,
						gender: res.gender,
						userId: res.userId,
						userName: res.userName,
						mobile: res.mobile,
						sterilization: res.sterilization,
						vaccination: res.vaccination,
						remark: res.remark,
					})
				})
				// this.$emit('upload')
				// this.$nextTick(() => {
				//     this.form.setFieldsValue({
				// 					...res
				// 				})

				// 			})
			}
		}
	}
</script>
<style lang='less' scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>